<template>
  <view>
    <view class="order" v-for="(item, index) in orders" :key="item.Order_ID" @click="gotoOrderDetail(item.Order_ID)">
      <h1 class="D-mode">自驾</h1>
      <h2 class="number">订单编号：{{item.Order_ID}}</h2>
      <h3 class="C-model">用车编号：{{item.Order_Car}}</h3>
      <h4 class="time">用车时间：{{item.Order_Date}}</h4>
      <h5 class="price">订单金额：{{item.Goods_Price}}</h5>
      <h6 class="P-status">是否支付：{{item.Order_Pay}}</h6>
      <!-- 取消订单  @click.stop 禁止事件冒泡-->
      <button class="cancle" v-if="item.Order_Pay==='未支付'"
        @click.stop="CancelOrder(item.Order_ID,item.Order_Car)">取消订单</button>
      <!-- 删除订单 -->
      <button class="delete" v-if="item.Order_Pay==='已支付' || item.Order_Pay==='已退单'"
        @click.stop="DelOrder(item.Order_ID)">删除订单</button>
      <button class="pay" v-if="item.Order_Pay==='未支付'"
        @click.stop="payment(item.Order_ID,item.Order_Car)">确认支付</button>
    </view>
    <view v-if="orders.length==0" class="noOrder">
      暂无订单信息，请下单试试！
    </view>
  </view>
</template>
<script>
  import store from '@/store/index.js' //需要引入store
  export default {
    data() {
      return {
        //接收订单内容
        name: '', //保存用户名
        orders: [],
      }
    },
    methods: {
      // 改变时间格式
      getBeiJingTime() {
        // ISO 8601格式的日期和时间
        console.log(this.orders)
        console.log('this.orders.length' + this.orders.length)
        for (var i = 0; i < this.orders.length; i++) {
          var iso8601Datetime = this.orders[i].Order_Date
          console.log('iso8601Datetime:' + iso8601Datetime)
          // 将ISO 8601格式转换为Date对象
          var dt = new Date(iso8601Datetime)
          // 进行时区调整
          var beijingTimezoneOffset = 8 * 60 // 北京时间为UTC+8
          var beijingTimestamp = dt.getTime() + beijingTimezoneOffset * 60 * 1000
          var beijingDatetime = new Date(beijingTimestamp)
          // 格式化为指定格式的字符串，并去除毫秒部分
          var beijingDatetimeStr = beijingDatetime.toISOString().replace('T', ' ').replace('Z', '').substring(0, 19)
          this.orders[i].Order_Date = beijingDatetimeStr
        }

      },
      // 获取订单详情
      gotoOrderDetail(Order_ID) {
        // 存储单个订单数据到state中，点击哪个订单存哪个
        this.selectedOrder = this.orders.find(item => item.Order_ID === Order_ID)
        store.commit('updateOrders', this.selectedOrder)
        console.log('orders::', store.state.orders)
        uni.navigateTo({ url: `/subpkg/orderDetail/orderDetail?${Order_ID}`, })
      },
      // 根据用户名获取订单信息
      async getOrders() {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/userOrderList',
          method: 'post',
          data: { name: this.name },
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        })
        if (res.status === 1) console.log(res.message)
        if (res.status === 0) {
          this.orders = res.data
          this.getBeiJingTime()
          console.log(this.orders)
        }
      },
      // 取消订单
      CancelOrder(Order_ID, Order_Car) {
        let that = this
        uni.showModal({
          title: '确认要退单吗？',
          // content: '这是一个模态弹窗',
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定')
              that.returnOrder(Order_ID, Order_Car)
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      },
      // 退单的方法
      async returnOrder(Order_ID, Order_Car) {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/refund',
          method: 'post',
          data: {
            orderCar: Order_Car,
            orderId: Order_ID
          },
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        })
        if (res.status === 1) console.log(res.message)
        if (res.status === 0) {
          // this.orders = res.data
          console.log('退单成功！' + res)
          uni.showToast({
            title: '退单成功!',
            icon: 'none',
            duration: 2000
          })
          this.getOrders()
        }
      },
      // 支付
      payment(Order_ID, Order_Car) {
        let that = this
        uni.showModal({
          title: '确认支付吗？',
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定')
              that.payApi(Order_ID, Order_Car)
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      },
      // 支付接口
      async payApi(Order_ID, Order_Car) {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/payment',
          method: 'post',
          data: {
            orderCar: Order_Car,
            orderId: Order_ID
          },
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        })
        if (res.status === 1) console.log(res.message)
        if (res.status === 0) {
          // this.orders = res.data
          console.log('支付成功！' + res)
          uni.showToast({
            title: '支付成功!',
            icon: 'none',
            duration: 2000
          })
          this.getOrders()
        }
      },
      // 删除订单 让用户不可见
      DelOrder(Order_ID) {
        let that = this
        uni.showModal({
          title: '确认要删除该订单信息吗？',
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定')
              that.delOrderApi(Order_ID)
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      },
      // 删除订单接口
      async delOrderApi(Order_ID) {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/delOrder',
          method: 'post',
          data: { orderID: Order_ID },
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        })
        if (res.status === 1) console.log(res.message)
        if (res.status === 0) {
          // this.orders = res.data
          console.log('删除成功！' + res)
          uni.showToast({
            title: '删除成功!',
            icon: 'none',
            duration: 2000
          })
          this.getOrders()
        }
      },
    },
    onLoad() {
      this.name = store.state.user.User_Name
      this.getOrders()

    }

  }
</script>
<style lang="scss">
  .noOrder {
    margin: 20px 52px;
    padding: 0 auto;
    color: red;
  }

  .order {
    width: 710rpx;
    height: 500rpx;
    background-color: #ffffff;
    margin: 20rpx;
  }

  .order .D-mode {
    margin-left: 20rpx;
    margin-bottom: 25rpx;
    padding-top: 25rpx;
    font-size: 40rpx;
  }

  .order .number,
  .C-model,
  .time,
  .price,
  .P-status {
    margin-left: 20rpx;
    margin-bottom: 25rpx;
    font-size: 30rpx;
  }

  .order .cancle,
  .delete,
  .pay {
    display: inline-block;
    float: right;
    margin-right: 10rpx;
    width: 170rpx;
    height: 75rpx;
    font-size: 26rpx;
  }
</style>